<!-- 选择病床 -->
<template>

	<!-- 普通弹窗 -->
	<uni-popup ref="popRef" background-color="#fff" @change="change">
		<view class="view-select-bed">
			<view class="view-select-bed-title">选择床位</view>
			<view class="view-check-all" @click.stop="setOrgCheckedAll(orgBedListRef)">
				<image :src="isCheckAllRef ? '/static/icon_check_selected.png' : '/static/icon_check_unselect.png'">
				</image>
				<text>全选/全不选</text>
			</view>
			<uni-list :border="false" class="scroll-Y scroll-view-box scroll-view-select-bed-content">
				<view class="view-select-bed-item" v-for="(item, index) in orgBedListRef" :key="index">
					<view class="select-room-item" @click.stop="checkItem(null,orgBedListRef,index)">
						<image
							:src="item.checked ? '/static/icon_check_selected.png' : '/static/icon_check_unselect.png'" />

						<text>{{item.orgName}}</text>
					</view>

					<view class="select-bed-item-container">
						<view class="select-bed-item" v-for="(childItem, index) in item.children" :key="index"
							@click.stop="checkItem(item, item.children,index)">
							<image
								:src="childItem.checked ? '/static/icon_check_selected.png' : '/static/icon_check_unselect.png'" />
							<text>{{childItem.orgName}}</text>
						</view>

					</view>

				</view>

			</uni-list>
			<view class="view-select-bed-bottom">
				<view class="view-btn">
					<view class="cancel" @click="cancel()">取消</view>
					<view class="confirm" @click="confirm()">确定</view>
				</view>
			</view>
		</view>


	</uni-popup>

</template>

<script setup>
	import * as httpConfig from "@/common/http-config.js";
	import * as DataUtils from "@/utils/DataUtils";

	import {
		ref,
		getCurrentInstance,
		onMounted,
		onUnmounted,
		computed,
		defineComponent,
		watch,
		reactive
	} from 'vue'

	// 获取当前组件实例
	const instance = getCurrentInstance()
	// 初始化信息
	const initInfo = ref({})

	onMounted(() => {
		if (instance?.proxy?.$globalData?.initInfo) {
			let jsonStr = instance.proxy.$globalData.initInfo;
			console.log("onMounted jsonStr = " + jsonStr)
			initInfo.value = JSON.parse(jsonStr)
			console.log("onMounted initInfo = " + initInfo.value)
		}

	});
	// 使用 onUnmounted 钩子
	onUnmounted(() => {


	});

	// 定义 props
	const props = defineProps({
		title: {
			type: String,
			default: ""
		},
		showRight: {
			type: Boolean,
			default: false
		},
		checkedSelect: {
			type: Boolean,
			default: false
		},

		checkBedList: {
			type: Array, // 声明为数组类型
			default: () => [] // 默认值为空数组
		},
		orgId: {
			type: String,
			default: ""
		},

	});

	const popRef = ref(null)
	// 监听 showRight 的变化
	watch(
		() => props.showRight, // 监听 showRight 的值
		(newVal, oldVal) => {
			console.log("showRight 值发生变化：" + newVal + "," + popRef);
			// 在这里执行 showRight 变化后的逻辑
			if (newVal)

			{
				// 展开的时候，在请求病床的信息
				popRef.value.open('right')
				//1、重置病床的信息
				orgBedListRef.value = []
				isCheckAllRef.value = false
				//2、请求病床选择的列表
				orgBedList()
			} else {
				popRef.value.close()
			}
		}
	);

	// 定义 emits
	const emit = defineEmits(['update:showRight', 'update:checkBedList']);

	// 定义方法
	function back() {
		console.log("back----------");
		emit('update:showRight', false); // 更新 showRight
	}

	function change(e) {
		console.log('当前模式：' + e.type + ',状态：' + e.show);
		emit('update:showRight', e.show); // 更新 showRight
	}



	function cancel() {
		back()
	}

	function confirm() {
		let bedList = []
		if (DataUtils.isEmpty(orgBedListRef.value)) {
			back()
		} else 
		{
			orgBedListRef.value.forEach(item => 
			{
				console.log("item.child=" + JSON.stringify(item))
				if (!DataUtils.isEmpty(item.children)) {
					item.children.forEach(child => {
						if (child.checked) {
							bedList.push(child)
						}
					});
					emit('update:checkBedList', bedList); // 更新 selectBedList

				}


			});
			if (props.checkedSelect) 
			{
				if (bedList.length > 0) {
					back()
				} else {
					uni.showToast({
						title: '请选择病床',
						icon: "error",
						duration: 2000
					});
				}
			} else {
				back()
			}


		}


	}
	const orgBedListRef = ref([])
	// 指定组织架构下的所有病床列表
	function orgBedList() {
		console.log("orgBedList = " + initInfo.value["orgId"])
		uni.request({
			url: httpConfig.baseURL + httpConfig.orgBedList, // 请求的 URL
			method: 'POST', // 请求方法为 POST
			data: {
				"orgId": props.orgId
			},
			success: (res) => {
				console.log('orgBedList success', res.data.data);
				if (res.data.code == httpConfig.successCode) {
					orgBedListRef.value = res.data.data
					setOrgCheckedAll(orgBedListRef.value)

				}
				// 在这里处理请求成功的情况
			},
			fail: (err) => {
				console.error('orgBedList fail ', err);
				// 在这里处理请求失败的情况
			}
		});
	}
	const isCheckRoom = ((list) => {
		return list.every(item => item.checked);

	});
	const isCheckAll = (() => {
		return orgBedListRef.value.every(item => item.checked);

	});
	// parent---父亲
	// me 自己
	const checkItem = (parent, list, index) => {
		console.log(list[index].checked)
		//先修改自己当前的这个属性
		list[index].checked = !list[index].checked

		//修改父亲的属性
		if (!DataUtils.isEmpty(parent)) {
			parent.checked = isCheckRoom(list)
		}
		// 判断是否有孩子
		if (!DataUtils.isEmpty(list[index].children)) {
			list[index].children.forEach(child => {
				child.checked = list[index].checked; // 把孩子的属性，改成自己的属性
			});

		}
		console.log("isCheckAll()" + isCheckAll())
		isCheckAllRef.value = isCheckAll()


	};

	const isCheckAllRef = ref(false)

	const setOrgCheckedAll = (list) => {
		if (DataUtils.isEmpty(list)) {
			return
		}
		isCheckAllRef.value = !isCheckAllRef.value
		setOrgCheckedAllForChild(list, isCheckAllRef.value);
	};
	const setOrgCheckedAllForChild = (list, checked) => {
		if (DataUtils.isEmpty(list)) {
			return
		}
		list.forEach(item => {
			item.checked = checked
			if (!DataUtils.isEmpty(item.children)) {
				setOrgCheckedAllForChild(item.children, checked);
			}


		});

	};
</script>

<style lang="less" scoped>
	@vw: 8.015vw;
	@vh: 5.4vh;

	.view-select-bed {
		position: absolute;
		font-size: 13/@vh;
		background-color: white;

		box-shadow: 10/@vw 10/@vw 15/@vh 5/@vh rgba(0, 0, 0, 0.6);
		/* 扩展半径增大 */
		height: 100%;
		color: #2C2E30;
		display: flex;
		top: 0;
		right: 0;
		width: 340/@vw;
		flex-direction: column;

		.view-select-bed-title {
			margin-left: 29/@vw;
			margin-top: 12/@vh;
			font-weight: bold;
		}

		.view-check-all {
			margin-top: 24/@vh;
			margin-left: 29/@vw;
			display: flex;
			flex-direction: row;
			align-items: center;

			image {
				width: 15/@vw;
				height: 15/@vh;
			}

			text {
				margin-left: 7/@vw;
				font-weight: bold;
			}
		}

		.scroll-view-select-bed-content {
			margin-left: 29/@vw;
			margin-top: 20/@vh;

			flex: 1;
			width: 100%;
			overflow: auto;

			image {
				width: 15/@vw;
				height: 15/@vh;
			}

			// 代码在这里
			.view-select-bed-item {

				display: flex;
				flex-direction: row;
				align-items: flex-start;
				margin-top: 12/@vh;

				.select-room-item {
					display: flex;
					flex-direction: row;
					align-items: center;
					width: 70/@vw;

					text {
						margin-left: 7/@vw;
						font-weight: bold;
					}


				}

				.select-bed-item-container {
					margin-right: 20/@vw;
					flex: 1;
					display: flex;
					flex-wrap: wrap;
					/* 允许子元素换行 */
					justify-content: flex-start;

					// 代码在这里
					.select-bed-item {
						margin-right: ;
						display: flex;
						flex-direction: row;
						align-items: center;
						margin-bottom: 15/@vh;
						margin-right: 18/@vw;

						text {
							margin-left: 7/@vw;
						}


					}

				}
			}


		}

		.view-select-bed-bottom {
			width: 100%;
			height: 60/@vh;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: right;
			position: relative;

			.view-btn {
				display: flex;
				flex-direction: row;
				position: absolute;
				right: 0;

				.cancel {
					margin-right: 20/@vw;
					display: flex;
					justify-content: center;
					align-items: center;
					width: 50/@vw;
					height: 28/@vh;
					border-radius: 3/@vh;
					border: 0.5/@vh solid #0F6AF8;
					color: #2C2E30;
				}

				.confirm {
					margin-right: 24/@vw;
					display: flex;
					justify-content: center;
					align-items: center;
					width: 50/@vw;
					height: 28/@vh;
					border-radius: 3/@vh;
					background-color: #0F6AF8;
					color: white;
				}
			}


		}

	}
</style>